import React from 'react';
import {
    StyleSheet,
    View,
    Text,
    Platform,
    Image,
    TouchableWithoutFeedback,
} from 'react-native';
import { insertCollect, deleteCollect } from '../api/my';
import { Toast } from 'teaset'
import {setSpText,iphone5,setHW} from './ScreenUtil'

//获取设备的宽度和高度
export default class BuyedCommon extends React.Component {
    constructor(props) {
        super(props);
        this.params = props.navigation.state.params;
        this.state = {
            isFetching: false
        }
    }
    // 是否收藏  {/* 1收藏 2未收藏 */}
    isCollect(ISCOLLECT) {
        //手动更改状态
        if(ISCOLLECT!=='-1'){
            this.setState({ isFetching: !this.state.isFetching });
            this.props.headerInfor.ISCOLLECT = ISCOLLECT == '1' ? '2' : '1';
            let json = {
                USER_ID: global.ECourseConstant.userInfo.uuid,//用户id
                COURSE_ID: this.props.headerInfor.ID
            }
            if (ISCOLLECT == '1') {//已收藏
                this._deleteCollect(json);
            } else {//没有收藏
                this._insertCollect(json);
            }
        }
    }
    // 添加收藏
    _insertCollect(json) {
        insertCollect(json).then(res => {
            Toast.message("收藏成功")
        })
    }
    // 取消收藏
    _deleteCollect(json) {
        deleteCollect(json).then(res => {
            Toast.message("取消收藏成功")
        })
    }

    goBack() {
        let params = this.props.navigation.state.params;
        global.log(this.props.navigation, 'this.props.navigation')
        if (global.ECourseConstant.eCourseFirstRouter == "DetailLesson") {
            this.props.navigation.navigate("HomePage");
        } else {
            params && params.refreshPage && params.refreshPage();//返回上一个页面的refreshPage()
            this.props.navigation.goBack();//pop就会返回上一个页面)
        }
    }

    render() {
        return (
            <View>
                {this.props.headerInfor ?
                    <View style={styles.buyed}>
                        <View style={styles.header}>
                            <View>
                                <Image style={styles.headerIcon} source={{ uri:this.props.headerInfor.PIC }} />
                            </View>
                            <View style={styles.headerTitle}>
                                <View>
                                    {this.courseName(this.props.headerInfor.TITLE||this.props.headerInfor.COURSE_NAME)}
                                    <View style={styles.subjectGrade}>
                                        <Text style={styles.subject}>
                                            {this.props.headerInfor.SUBJECTNAME}
                                        </Text>
                                        <Text style={styles.diandian}>.</Text>
                                        {this.gradeFun(this.props.headerInfor.LISTGRADE)}
                                    </View>
                                    {/* 报名截止时间：购买前的展示，购买后不展示 */}
                                    {this.showStopTime(this.props.headerInfor.STOP_TIME)}
                                </View>
                                <View>
                                    <TouchableWithoutFeedback  onPress={() => this.isCollect(this.props.headerInfor.ISCOLLECT)}>
                                        <View style={styles.careBox}>
                                            <Image style={styles.xingxing} 
                                            source={this.props.headerInfor.ISCOLLECT == '-1' ? 
                                            require('../assets/imgs/disXingXing.png') :
                                            this.props.headerInfor.ISCOLLECT == '1'? 
                                            require('../assets/imgs/careActive.png'):
                                            require('../assets/imgs/xingxing.png')} />
                                            <Text style={this.props.headerInfor.ISCOLLECT == '1' ? styles.careActive : styles.careText}>
                                                {this.props.headerInfor.ISCOLLECT == '1' ? '已收藏' : '收藏'}
                                            </Text> 
                                        </View>
                                    </TouchableWithoutFeedback>
                                    <View style={styles.careBox}>
                                        <Text style={styles.number}>
                                            {this.KeShiNum(this.props.headerInfor.LISTCOURSEPART)}
                                        </Text>
                                    </View>
                                </View>
                            </View>
                        </View>
                    </View> : null}
            </View>

        );
    }
    // 展示截止时间
    showStopTime(STOP_TIME) {
        if (STOP_TIME) {
            return (
                <Text style={styles.endTime}>报名截止时间：{this.props.headerInfor.STOP_TIME}</Text>
            )
        }
    }
    // 返回所有年级
    gradeFun(gradeArr) {
        if (gradeArr) {
            if (gradeArr.length) {
                if(iphone5()&&!this.props.isKeshi){//小手机 课程下
                    let overFlow=false;//超出
                    let text='';
                    let maxLen=gradeArr.length>4? 4:gradeArr.length;
                    gradeArr.length>4? overFlow=true:overFlow=false;
                    gradeArr.map((grade, i) => {
                        if(i<maxLen){
                            text +=grade+' '
                        }
                    })
                    overFlow?text=text+'...': text=text
                    return(
                        <Text style={[styles.subject, styles.grade]}>{text}</Text>
                    )
                }else{
                    return gradeArr.map((grade, i) => {
                        return (
                            <Text style={[styles.subject, styles.grade]} key={i}>{grade}</Text>
                        )
                    })
                }
            }
        }
    }
    // 课时number 课程目录展示 课时的不展示
    KeShiNum(keshi) {
        if (this.props.isKeshi) {//表示是课时页面
            return ''
        } else {
            if (keshi && keshi.length) {
                return '共' + keshi.length + '个课时'
            } else {
                return ''
            }
        }
    }
    // 显示课程名称，最多10个字符，多出字符使用省略号表示
    courseName(name) {
        // name='能为肌肤颁奖盛典不错比较大块'
        if (name) {
            if (name.length > 10) {
                return (
                    <Text style={styles.zhangJie}>{name.substring(0, 10) + '...'}</Text>
                )
            } else {
                return (
                    <Text style={styles.zhangJie}>{name}</Text>
                )
            }
        }
    }
}
const styles = StyleSheet.create({
    backIcon: {
        position: 'absolute',
        top: Platform.OS == 'android' ? 10 : 20,
        left: 10,
        backgroundColor: 'rgba(0,0,0,.6)',
        borderRadius: 24,
        width: 24,
        height: 24,
        alignItems: 'center',
        justifyContent: 'center'
    },
    backIconImg: {
        fontSize:setSpText(20),
        color: '#fff'
    },
    buyed: {
        backgroundColor: '#F7F7F9',
    },
    navigatorBar: {
        backgroundColor: '#fff',
        height: 50,
    },
    backBtn: {
        position: 'absolute',
        top: 20,
        left: 20,
        width: 18,
        height: 20,
        backgroundColor: 'blue',
    },
    header: {
        marginBottom: 10,
    },
    endTime: {
        fontSize:setSpText(24),
        color: '#666',
        marginTop: 5,
    },

    headerIcon: {
        height: setHW(422),
    },
    headerTitle: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding: 10,
        backgroundColor: '#fff'
    },

    zhangJie: {
        color: '#333333',
        fontSize:setSpText(32),
        fontWeight: 'bold'
    },
    subjectGrade: {
        flexDirection: 'row',
        height:setHW(42),
        marginTop:5,
        justifyContent:'flex-start',
        alignItems:'center',
    },
    subject: {
        color: '#666',
        fontSize:setSpText(24)
    },
    diandian: {
        marginRight: 5,
        marginLeft: 5,
        marginBottom: Platform.OS === "ios" ? 4 : 5,
    },
    grade:{
        paddingRight:2,
    },
    careBox: {
        flexDirection: 'row',
        height: 20,
        justifyContent:'flex-end',
        alignItems:'center',
    },
    xingxing: {
        width: setHW(34),
        height: setHW(34),
        marginRight: setHW(8),
    },
    careText: {
        color: '#666',
        fontSize:setSpText(24),
        marginRight: 1,
    },
    careActive: {
        color: '#666',
        fontSize:setSpText(24),
        color: '#FF8A00',
    },
    number: {
        color: '#999',
        fontSize:setSpText(24),
        marginTop: 5,
    },
    backBtn: {
        backgroundColor: '#BFBFBF',
    }
})
